import Vue from 'vue'
import { h, render, patch } from '../source/vdom'

// Vue是
let vm = new Vue({
  el: '#root', // 表示渲染的根元素
  data(){
    return {
      msg: 'hello',
      school: {
        name: 'zf',
        age: 10,
      },
      arr: [[0], 2, 3]
    }
  },
  computed: {
    
  },

  watch: {
    msg(newVal, oldValue){
      debugger
      console.log(newVal, oldValue)
    }
  },
});


// vm.msg = vm._data.msg
// 对原生的方法进行劫持
// 如果新增的属性，是对象，也需要进行观察
// console.log('vm', vm.arr[0].a = '123')


// vm.school = { name: 'zhufeng' }

// vm.school.name = 'zf'

setTimeout(() => {
  // vm.msg = '1';
  // vm.msg = '2';
  // vm.msg = '3';
  // vm.msg = '4';
  // vm.msg = '5';
  // vm.school.name = 'zhufengjiagou'
  // 需要批量进行更新
  // vm.arr[0].push(100)
  // -----------------------
  // vm.msg = 'watch'

}, 3000)


let oldVnode = h(
  'div', 
  {
    id: 'container', 
    style: {backgroundColor: 'red'}
  }, 
  h('li', {style: {backgroundColor: 'red'}, key: 'a'}, 'a'),
  h('li', {style: {backgroundColor: 'yellow'}, key: 'b'}, 'b'),
  h('li', {style: {backgroundColor: 'blue'}, key: 'c'}, 'c'),
  h('li', {style: {backgroundColor: 'pink'}, key: 'd'}, 'd'),
  h('li', {style: {backgroundColor: 'blue'}, key: 'e'}, 'e'),
  h('li', {style: {backgroundColor: 'red'}, key: 'f'}, 'f')
);

let container = document.getElementById('root');

render(oldVnode, container)



// patchVnode 用心的虚拟节点和老的 虚拟节点对比，更新真实的dom元素
let newVnode = h(
  'div', 
  {id: 'aa'},
  h('li', {style: {backgroundColor: 'pink'}, key: 'e'}, 'e'),
  h('li', {style: {backgroundColor: 'blue'}, key: 'a'}, 'a'),
  h('li', {style: {backgroundColor: 'yellow'}, key: 'f'}, 'f'),
  h('li', {style: {backgroundColor: 'red'}, key: 'c'}, 'c'),
  h('li', {style: {backgroundColor: 'gray'}, key: 'n'}, 'n'),
  
);


setTimeout(() => {
  patch(oldVnode, newVnode)
}, 3000)


